<template>
  <div class="img-with-text" @click="topicTodetail(tabId,topicItem)" :class="{index_topic:topiclistfa=='0'}">
    <img v-lazy="topicimg"  class="imgtextback"/>
    <div class="indexhottuati" v-show="isindex">
       <img src="~img/indexhothuatiback.png" class="hottopicback" />
    </div>
    <div class="indexhottuati"  v-show="isindex" >{{hotName}}</div>
    <p v-if="topictype==1||topictype==null" class="topiclisttitle">{{title}}</p>
    <p v-if="topictype==1||topictype==null" class="topiclistabbreviations">{{abbreviations}}</p>
    <p class="yl-2gz topiclistfollownumber">{{followNumber}}人关注 </p>
  </div>
</template>
<script>
  export default {
    props:['topictype','followNumber','title','abbreviations','topicimg',"tabId","topicItem","isindex","hotName","topiclistfa"],
    methods:{
      topicTodetail(tabId,topicItem){
          this.$emit("topicback",{tabId:tabId,topicItem:topicItem}) 
      }
    }
  }
</script>
<style scoped>
.img-with-text{
  /* margin-left: 0.3rem; */
   text-align: justify;
    padding: 0.3rem;
    background: #ffffff;
    position: relative;
    margin-top: 0.2rem;
}
.index_topic{
  margin-top: 0.3rem;
}
.imgtextback{
  width: 100%;
  display: block;
  height: 3.5rem;
  border-radius: 10px
}
.img-with-text p{
  margin: 0
}
.topiclisttitle{
  font-size: 0.36rem;
  color: #333;
  padding: 10px 0 4px 0;
  font-family: PingFangSC Medium;
}
.topiclistabbreviations{
  font-size: 0.24rem;
  color: #777777;
  padding-bottom: 7px;
  font-family: PingFangSC Regular;
}
.topiclistfollownumber{
  font-size: 0.24rem;
  color: #999999;
}
 .hottopicback {
  width: 1.88rem;
} 

.indexhottuati{
  position: absolute;
  top: 0.3rem;
  height: 0.44rem;
  line-height: 0.44rem;
  width: 100%;
  left:0;
  text-align: center;
  font-size: 0.24rem;
  color: #333;
}
</style>
